<template>
	<div class="mapConDatasWrap">
		<div class="mapConDatas">
			<div class="mapConDatasList">
				
				<div class="mapConDatasListConNew">
					<span class="zljhzTit">2013年至今总累计货值(万元)</span>
					<span class="zljhzNum">{{commonFunction.formatNumberRgx(totalHuozhi)}}</span>
				</div>
				<div class="mapConDatasListConNew">
					<div class="zljWrap">
						<span class="zljDlTit">总累计单量(万包)</span>
						<span class="zljDlNum">{{commonFunction.formatNumberRgx(totalDanliang)}}</span>
					</div>
					<div class="zljWrap">
						<span class="zljSeTit">总累计税额(亿元)</span>
						<span class="zljSeNum">{{commonFunction.formatNumberRgx(totalShuie)}}</span>
					</div>
					
				</div>
			</div>
			<div class="mapConDatasList">
				<div class="mapConDatasListConNew">
					
					<img class="titImg" src="../../../../static/img/yuanbingImg.png" />
					<span class="ldtzTit">拉动投资</span>
					<img class="biaomingImg" src="../../../../static/huobiImg.png" />
					<div class="ldtzNum">
						<span>{{commonFunction.formatNumberRgx(touzhiData)}}</span>
						<span>亿元</span>
					</div>
				</div>
				<div class="mapConDatasListConNew">
					<img class="titImg" src="../../../../static/img/yuanbingImg.png" />
					<span class="ddjyTxt">带动就业</span>
					<img class="biaomingImg" src="../../../../static/renImg.png" />
					
					<div class="ddjyNum">
						<span>{{commonFunction.formatNumberRgx(jiuyeData)}}</span>
						<span>人</span>
					</div>
				</div>
				
			</div>
			
		</div>
		<div class="mapConDatas">
			<div class="mapConDatasList">
				<div class="gundongWrap">
					<gundong :title="huozhiDataName" :gundongDatas='huozhiData'></gundong>
					<span class="gundongDw">（元）</span>
				</div>
				<div class="gundongWrap">
					<gundong :title="dianliangDataName" :gundongDatas='dianliangData'></gundong>
					<span class="gundongDw">（包）</span>
				</div>
				
			</div>
			<div class="mapConDatasList">
				<div class="mapConDatasListCon">
					
					<div class="mapConDatasListConCon">
						
						<div>
							<img src="../../../../static/img/nian.png" />
							<span>{{commonFunction.formatNumberRgx(yeardianliangData)}}</span>
							<span>万包</span>
						</div>
						<span>当年单量</span>
					</div>
					<div class="mapConDatasListConCon">
						
						<div>
							<img src="../../../../static/img/nian.png" />
							<span>{{commonFunction.formatNumberRgx(yearhuozhiData)}}</span>
							<span>万元</span>
						</div>
						<span>当年货值</span>
					</div>
					
				</div>
				
			</div>
			
		</div>
		
	</div>
	
</template>

<script>
	import gundong from '@/components/children/center/gundong';
	export default {
		name: 'number1',
		components: {
			gundong
		},
		data() {
			return {
				huozhiDataName: '当日货值',
				huozhiData: 0,
				dianliangDataName: '当日单量',
				dianliangData: 0, 
				yearhuozhiData:0,
				yeardianliangData:0,
				jiuyeData:0,
				touzhiData:0,
				totalHuozhi:0,
				totalDanliang:0,
				totalShuie:0,
			}
		},
		mounted() {
			var that = this;
			that.getDataFn1()
			that.getDataFn2()
			that.getDataFn3()
			that.getDataFn4()
			setInterval(function() {
				that.getDataFn1()
				that.getDataFn2()
				that.getDataFn3()
				that.getDataFn4()
			}, 30000)
			
		},
		methods: {
			// 千分位逗号隔开（,）that.commonFunction.formatNumberRgx(num)
			// 获取明天that.commonFunction.getTomorrowDate();
			// 获取当前日期that.commonFunction.formatDate() 
			// 当前日期的下个月that.commonFunction.getNextMonth()
			// 当前日期的前一个月that.commonFunction.getPreMonth()
			// 获取当前日期的前一年的年月日that.commonFunction.getLastYearYestdy() 

			getDataFn1() {
				var that = this;
				var startDate = that.commonFunction.formatDate()[0]+'-'+that.commonFunction.formatDate()[1]+'-'+that.commonFunction.formatDate()[2];
				var nextDate =  that.commonFunction.getTomorrowDate()[0]+'-'+that.commonFunction.getTomorrowDate()[1]+'-'+that.commonFunction.getTomorrowDate()[2];
				// console.log(startDate,nextDate,"X")
				that.$myHttp.get("getBusinessTrendsInfo", {
						params: {
							dtype: 'D',
							start: startDate,
							end: nextDate,
						}
					})
					.then(function(data0) {
						if (data0.status == "200") {
							// console.log()
							var getDatas = data0.data.result.hn_business_trends
							
							that.huozhiData =parseInt(getDatas[0].GOODVALUE);
							// console.log(that.huozhiData)
							that.dianliangData =parseInt(getDatas[0].AMOUNT);
						} else {
							alert("数据请求错误")
						}

					})
					.catch(function(error) {
						alert(error)
					})
			},
			getDataFn2() {
				var that = this;
				var startDate1 = that.commonFunction.getTomorrowDate()[0];
				// console.log( startDate1,startDate1+1)
				that.$myHttp.get("getBusinessTrendsInfo", {
						params: {
							dtype: 'Y',
							start: startDate1,
							end: startDate1+1,
						}
					})
					.then(function(data0) {
						if (data0.status == "200") {
							
							var getDatas = data0.data.result.hn_business_trends
							that.yeardianliangData = parseInt(getDatas[0].AMOUNT/10000).toFixed(0)
							// console.log(getDatas)
							 that.yearhuozhiData = parseInt(getDatas[0].GOODVALUE/10000).toFixed(0)
						} else {
							alert("数据请求错误")
						}
			
					})
					.catch(function(error) {
						alert(error)
					})
			},
			getDataFn3() {
				var that = this;
				
				that.$myHttp.post("getJiuYeAndTouZiInfo")
					.then(function(data0) {
						if (data0.status == "200") {
							// console.log()
							var getDatas = data0.data.result.JiuYeAndTouZiData
							// console.log(data0)
							that.jiuyeData = getDatas[0].VALUE
							that.touzhiData =getDatas[1].VALUE
						} else {
							alert("数据请求错误")
						}
			
					})
					.catch(function(error) {
						alert(error)
					})
			},
			getDataFn4() {
				var that = this;
				
				that.$myHttp.post("getDanLiangHuoZhiShuie")
					.then(function(data0) {
						if (data0.status == "200") {
							console.log(data0.data.total,'nx')
							// that.jiuyeData = getDatas[0].VALUE
							// that.touzhiData =getDatas[1].VALUE
							that.totalHuozhi = (data0.data.total.huozhi).toFixed(0)
							that.totalDanliang = (data0.data.total.danliang/10000).toFixed(0)
							that.totalShuie = (data0.data.total.shuie/10000).toFixed(0)
						} else {
							alert("数据请求错误")
						}
			
					})
					.catch(function(error) {
						alert(error)
					})
			}
			
		}
	}
</script>

<style scoped>
	.mapConDatasWrap{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 100;
	}
	.mapConDatasListConNew{
		display: flex;
		align-items: center;
		height: .35rem;
	}
	.mapConDatasListConNew .zljhzTit{
		width: 45%;
		font-size: .14rem;
		color: #07EEE9;
	}
	.mapConDatasListConNew .zljhzNum{
		width: 45%;
		font-size: .24rem;
		font-weight: bold;
		color: #fff;
	}
	.zljWrap{
		width: 45%;
		display: flex;
		align-items: center;
	}
	.zljWrap .zljDlTit,.zljWrap .zljSeTit{
		font-size: .12rem;
		color: #07EEE9;
	}
	.zljWrap .zljDlNum,.zljWrap .zljSeNum{
		font-size: .14rem;
		font-weight: bold;
		color: #fff;
		margin-left: .1rem;
	}
	.titImg{
		width: .2rem;
		height: .2rem;
	}
	.ldtzTit,.ddjyTxt{
		color: #fff;
		font-size: .14rem;
		margin: 0 .1rem;
	}
	.ldtzNum,.ddjyNum{
		display: flex;
		align-items: center;
		margin-left: .1rem;
	}
	.ldtzNum>span:nth-of-type(1),.ddjyNum>span:nth-of-type(1){
		color: #07EEE9;
		font-size: .16rem;
		font-weight: bold;
	}
	.ldtzNum>span:nth-of-type(2),.ddjyNum>span:nth-of-type(2){
		color: #07EEE9;
		font-size: .12rem;
	}
	.biaomingImg{
		width: 1.2rem;
		height: .2rem;
	}
	.mapConDatas {
		
		
		width: 50%;
	}

	.mapConDatasList {
		width: 100%;
		/* margin-left: .7rem; */
	}
	.gundongWrap{
		display: flex;
		align-items: center;
		color: #07EEE9;
		font-size: .12rem;
		margin-bottom: .1rem;
	}

	.mapConDatasListCon {
		width: 100%;
		margin-top: .1rem;
		display: flex;
		align-items: center;
	}

	.mapConDatasListConCon {
		width: 50%;
		display: flex;
		/* align-items: center; */
		flex-direction: column;
		justify-content: center;
	}

	.mapConDatasListConCon>span {
		font-size: .14rem;
		color: #fff;
		margin-left:.26rem ;
	}

	.mapConDatasListConCon>div {
		display: flex;
		align-items: center;
		color: #0effeb;
	}
	.mapConDatasListConCon>div>img{
		width: .16rem;
		height: .18rem;
		margin-right: .1rem;
	}
	.mapConDatasListConCon>div>span:nth-of-type(1) {
		font-size: .18rem;
		font-weight: bold;
		letter-spacing: 2px;
	}

	.mapConDatasListConCon>div>span:nth-of-type(2) {
		font-size: .12rem;

	}
</style>
